<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/jquery-3.5.1.js}"></script>
    <script th:src="@{/static/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>
    <link th:href="@{/static/bootstrap-3.4.1-dist/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>

<div id="app">

    <!-- 员工修改的模态框 -->
    <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">员工修改</h4>
                </div>
                <div class="modal-body">
                    <form id="update_emp" class="form-horizontal" method="post">
                        <input type="hidden" name="_method" value="PUT"/>
                        <input type="hidden" name="empId" id="empId_hidden"/>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" name="lastName" class="form-control-static" id="empName_update_static"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_update_input"
                                       placeholder="email@qq.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_update_input" value="M">
                                    男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_update_input" value="F">
                                    女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control department_select" name="deptId">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button @click="updateEmp" type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 员工添加的模态框 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">员工添加</h4>
                </div>
                <div class="modal-body">
                    <form th:action="@{/employee}" id="add_employee" class="form-horizontal" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" name="lastName" class="form-control" id="empName_add_input"
                                       placeholder="EmpName">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email_add_input"
                                       placeholder="email@qq.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_add_input" value="M"
                                           checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control department_select" name="deptId">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button @click="addEmp()" type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除询问的模态框 -->
    <div class="modal fade" id="confirmDelModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">确认删除？</h4>
                </div>
                <div id="confirmText" class="modal-body">
                    ......
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" @click="delEmp">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页员工信息列表 -->
    <div id="empsData" class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-3 col-md-offset-9">
                <button class="btn btn-primary" data-toggle="modal" data-target="#empAddModal">新增</button>
                <a @click="toBatchDel" id="del_a" tabindex="0" class="btn btn-danger" role="button"
                   data-toggle="popover" data-trigger="focus"
                   title="提示"
                   data-content="你还未进行勾选需要批量删除的员工嗷~">删除
                </a>
            </div>
        </div>
        <!-- 显示表格数据 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                    <tr>
                        <th>
                            <input @click="checkAll" type="checkbox" id="check_all"/>
                        </th>
                        <th>EmpId</th>
                        <th>EmpName</th>
                        <th>Gender</th>
                        <th>Email</th>
                        <th>DeptName</th>
                        <th>Option</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="emp : ${pageInfo.list}">
                        <th>
                            <input @click="checkItem" form="delItems" type="checkbox" class="check_item" name="empItem" th:value="${emp.empId}"/>
                        </th>
                        <th th:text="${emp.empId}"></th>
                        <th th:text="${emp.lastName}"></th>
                        <th th:text="${emp.gender}"></th>
                        <th th:text="${emp.email}"></th>
                        <th th:text="${emp.dept.deptName}"></th>
                        <th>
                            <button th:@click="|editEmp(${emp.empId})|"
                                    class="btn btn-info" data-toggle="modal"
                                    data-target="#empUpdateModal"> 编辑
                            </button>
                            <button th:@click="|toDelEmp(${emp.empId})|"
                                    class="btn btn-danger" data-toggle="modal"
                                    data-target="#confirmDelModal"> 删除
                            </button>
                        </th>
                    </tr>
                    </tbody>
                </table>
            </div>
            <form id="del" method="post">
                <input type="hidden" name="_method" value="DELETE"/>
            </form>
            <form th:action="@{/employee}" id="delItems" method="post">
                <input type="hidden" name="_method" value="DELETE"/>
            </form>
        </div>

        <!-- 分页导航栏 -->
        <div style="text-align: center;"  aria-label="Page navigation">
            <ul class="pagination">
                <li th:class="${pageInfo.isFirstPage} ? 'active':''">
                    <a th:if="${!pageInfo.isFirstPage}" th:href="@{|/employee/${pageInfo.prePage}|}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <span th:if="${pageInfo.isFirstPage}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
                <li th:class="${page == pageInfo.pageNum} ? 'active':''" th:each="page : ${pageInfo.navigatepageNums}">
                    <a th:if="${page != pageInfo.pageNum}" th:href="@{|/employee/${page}|}" th:text="${page}">1</a>
                    <span th:if="${page == pageInfo.pageNum}" th:text="${page}">1</span>
                </li>
                <li  th:class="${pageInfo.isLastPage} ? 'active':''">
                    <a th:if="${!pageInfo.isLastPage}" th:href="@{|/employee/${pageInfo.nextPage}|}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <span th:if="${pageInfo.isLastPage}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <input class="page_num" type='hidden' name='pageNum' th:value="${pageInfo.pageNum}">
</div>
<script>
    /*
    由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。
    在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中他们：
     */
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('#del_a').on('show.bs.popover', function(event){
            var len = $("input[class='check_item']:checked").length;
            if (len !== 0){
                event.preventDefault();
            }
        })
    })

    axios.get("/SSM/department").then(response => {
        var depts = response.data;
        var $select = $(".department_select");
        $select.each(function(){
            for (var i = 0; i < depts.length; i++) {
                $(this).append("<option name='deptId' value='" + depts[i].deptId + "'>" + depts[i].deptName + "</option>")
            }
        });
    });

    var vue = new Vue({
        el: "#app",
        methods: {
            editEmp(empId) {
                axios.get("/SSM/employee/to/update/" + empId).then(response => {
                    var emp = response.data;
                    $("#empId_hidden").val(emp.empId);
                    $("#empName_update_static").val(emp.lastName);
                    $("#email_update_input").val(emp.email);
                    var gender = emp.gender === "男" ? "M" : "F";
                    $("input[id$=_update_input]input[id^=gender]").each(function () {
                        if (this.value == gender) {
                            this.checked = true;
                        }
                    });
                    $("option[name='deptId']").each(function () {
                        if (this.value == emp.dept.deptId) {
                            this.selected = 'selected';
                        }
                    });
                });
            },
            toDelEmp(empId) {
                $("#confirmDelModal").attr("isBatch", false);
                var $ths = $(event.target.parentElement).siblings();
                var lastName = $ths.eq(2).text()
                $("#confirmText").text("确认删除【" + lastName + "】吗?");
                var $form = $("#del");
                $form.prop("action", "/SSM/employee/" + empId);
            },
            toBatchDel(){
                var len = $("input[class='check_item']:checked").length;
                var confirmLable = $("#confirmDelModal");
                confirmLable.attr("isBatch", true);
                $("#confirmText").text("确认批量删除选中的 " + len + " 条用户信息吗?");
                if (len !== 0){
                    confirmLable.modal('show');
                }
            },
            delEmp() {
                if ($("#confirmDelModal").attr("isBatch") === "true"){
                    $("#delItems").append($(".page_num").removeProp("class"));
                    $("#delItems").submit();
                } else {
                    $("#del").append($(".page_num").removeProp("class"));
                    $("#del").submit();
                }
            },
            updateEmp(){
                var update_form = $("#update_emp");
                update_form.prop("action", "/SSM/employee");
                update_form.append($(".page_num").removeProp("class"));
                update_form.submit();
            },
            addEmp(){
                var form = $("#add_employee");
                form.append($(".page_num").removeProp("class"));
                form.submit();
            },
            checkAll(){
                var checked = $("#check_all").prop("checked");
                $(".check_item").prop("checked", checked);
            },
            checkItem(){
                var $check_all = $("#check_all");
                $check_all.prop("checked", true);
                $(".check_item").each(function(){
                    if (!this.checked){
                        $check_all.prop("checked", false);
                    }
                });
            }
        }
    });
</script>
</body>
</html>